<template>
	<view class="login-container">
		<!-- 顶部logo -->
		<view class="logo-box">
			<image src="/static/logo.png" mode="scaleToFill" class="logo"></image>
			<text class="title">SE家电</text>
		</view>

		<!-- 登录表单 -->
		<view class="form-box">
			<!-- 账号输入 -->
			<view class="input-item">
				<wd-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="user" clearable
					:custom-style="{ background: '#f8f8f8' }" />
			</view>

			<!-- 密码输入 -->
			<view class="input-item">
				<wd-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="lock" show-password clearable
					:custom-style="{ background: '#f8f8f8' }">
				</wd-input>
			</view>

			<!-- 验证码输入 -->
			<view class="code-input">
				<wd-input v-model="loginForm.captcha" placeholder="请输入验证码" prefix-icon="check" clearable
					:custom-style="{ background: '#f8f8f8' }" />
				<image class="verify-code-img" :src="captchaImage ? captchaImage : ''" @click="handleGetCaptcha"
					mode="aspectFit" />
			</view>

			<wd-button type="primary" block @click="handleLogin" class="login-btn">登录</wd-button>

			<!-- 其他登录方式 -->
			<view class="other-login">
				<view class="divider">
					<text class="line"></text>
					<text class="text">其他登录方式</text>
					<text class="line"></text>
				</view>
				<view class="wechat-login">
					<wd-button type="success" block @click="handleWechatLogin" class="wechat-btn">
						<template #prefix>
							<image src="/static/wechat.png" mode="aspectFit" class="wechat-icon"></image>
						</template>
						微信一键登录
					</wd-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { getCaptcha, loginByUsername, loginByWechat } from '@/api/user.js'

// 登录表单
const loginForm = reactive({
	username: '',
	password: '',
	captcha: '',
	captchaId: ''
})

// 验证码图片
const captchaImage = ref('')

// 控制密码显示/隐藏
const showPassword = ref(false)

// 获取验证码
const handleGetCaptcha = async () => {
	try {
		const res = await getCaptcha()
		captchaImage.value = res.captchaImage
		loginForm.captchaId = res.captchaId
	} catch (err) {
		console.error('获取验证码失败：', err)
		uni.showToast({
			title: '获取验证码失败',
			icon: 'none'
		})
	}
}

// 账号密码登录
const handleLogin = async () => {
	if (!loginForm.username || !loginForm.password || !loginForm.captcha) {
		uni.showToast({
			title: '请输入完整信息',
			icon: 'none'
		})
		return
	}

	try {
		const token = await loginByUsername(loginForm)
		// 保存token
		uni.setStorageSync('token', token)
		uni.showToast({
			title: '登录成功',
			success: () => {
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1500)
			}
		})
	} catch (err) {
		console.error('登录失败：', err)
		uni.showToast({
			title: '登录失败',
			icon: 'none'
		})
	}
	handleGetCaptcha()

}

// 微信登录
const handleWechatLogin = () => {
	uni.login({
		provider: 'weixin',
		success: async function (loginRes) {
			try {
				const token = await loginByWechat(loginRes.code)
				// 保存token
				uni.setStorageSync('token', token)

				uni.showToast({
					title: '登录成功',
					success: () => {
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1500)
					}
				})
			} catch (err) {
				console.error('微信登录失败：', err)
				uni.showToast({
					title: '微信登录失败',
					icon: 'none'
				})
			}
		},
		fail: function (err) {
			console.error('获取微信code失败：', err)
			uni.showToast({
				title: '微信登录失败',
				icon: 'none'
			})
		}
	})
}

// 页面加载时获取验证码
onMounted(() => {
	handleGetCaptcha()
})
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	padding: 80rpx 40rpx;
	background-color: #f8f8f8;
	box-sizing: border-box;

	.logo-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;

		.logo {
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		}

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.form-box {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.input-item {
			margin-bottom: 30rpx;

			:deep(.wd-input) {
				border-radius: 12rpx;
				overflow: hidden;

				.wd-input__inner {
					height: 88rpx;
					font-size: 28rpx;
					background: #f8f8f8;
				}

				.wd-input__prefix {
					padding-left: 24rpx;
				}

				.wd-input__suffix {
					padding-right: 24rpx;
				}
			}
		}

		.password-icon {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
		}

		.code-input {
			display: flex;
			gap: 20rpx;
			margin-bottom: 40rpx;

			:deep(.wd-input) {
				flex: 1;
			}

			.verify-code-img {
				width: 200rpx;
				height: 88rpx;
				border-radius: 12rpx;
				background-color: #f5f5f5;
			}
		}

		.login-btn {
			margin-bottom: 60rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.other-login {
		margin-top: 40rpx;

		.divider {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.line {
				flex: 1;
				height: 1px;
				background-color: #eee;
			}

			.text {
				padding: 0 30rpx;
				color: #999;
				font-size: 26rpx;
			}
		}

		.wechat-login {
			.wechat-btn {
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				background-color: #07c160;
				border-color: #07c160;

				&:active {
					background-color: darken(#07c160, 5%);
					border-color: darken(#07c160, 5%);
				}
			}

			.wechat-icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 12rpx;
			}
		}
	}
}
</style>
